<template>
	<div class="pt-20px pb-20px text-14px flex items-center">
		<div>
			自选
		</div>
		<div v-for="(item,index) in data" :key="index"
		class="flex items-center ml-26px">
			<div class="mr-4px">
				{{ item.coin }}
			</div>
			<div class="mr-4px">
				{{ item.multiple }}
			</div>
			<div class="mr-4px"
			:class="{'text-#F34E5F':item.rate < 0,'text-#07B175': !(item.rate < 0)}">
				{{ item.rate }} %
			</div>
			<div class="mr-4px">
				{{ item.value }}
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const data = ref<any[]>([
	{
		coin:'DOGE/USDT',
		multiple:'10x',
		rate:'-12.23',
		value:'32.212'
	},
	{
		coin:'DOGE/USDT',
		multiple:'10x',
		rate:'-12.23',
		value:'32.212'
	},
	{
		coin:'DOGE/USDT',
		multiple:'10x',
		rate:'-12.23',
		value:'32.212'
	},
	{
		coin:'DOGE/USDT',
		multiple:'10x',
		rate:'-12.23',
		value:'32.212'
	},
	{
		coin:'DOGE/USDT',
		multiple:'10x',
		rate:'-12.23',
		value:'32.212'
	}
]);
</script>

